/**
 * 挂号菜单 挂号单创建
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/operationsummary/Operations' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>新增挂号</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form
      :inline="true"
      :model="formInline"
      :rules="rules"
      class="user-search"
    >
  
       <el-form-item label="所属科室:" prop="deptOffice">
        <!-- 下拉框 -->
        <el-select size="small" v-model="formInline.officeId" placeholder="所属科室">
                  
          <el-option v-for="office in officeList" :label="office.name" :value="office.name" :key="office.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接诊类型：" prop="deptType">
        <!--根据字典表生成下拉选项-->
        <el-select
          size="small"
          clearable
          v-model="formInline.type"
          placeholder="接诊类型："
        >
          <el-option
            v-for="(label, value) in registerDict.type"
            :key="value"
            :label="label"
            :value="value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="所属医生:">
        <el-select size="small" v-model="formInline.doctor" placeholder="挂号医生" @change="getDoctorName">                   
          <el-option v-for="doctor in doctorList" :label="doctor.name" :value="doctor.id" :key="doctor.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="挂号费:" prop="deptRegistrationFee">
        <!--根据字典表生成下拉选项-->
        <el-select
          size="small"
          clearable
          v-model="formInline.drugRegistrationFee"
          placeholder="收取费用"
        >
          <el-option
            v-for="(label, value) in registerDict.registrationFee"
            :key="value"
            :label="label"
            :value="Number(value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
   
    <div style="font-size:25px ; color:blue" >患者信息</div>
    <el-form
      :inline="true"
      :model="patient"
      :rules="rules"
      class="user-search"
    >
      <el-form-item label="患者姓名：" >
        <!-- 搜索框 -->
         <PatientSelector :text="patientName" @callFather="handlePatientSelector"></PatientSelector>
         </el-form-item
      >
       <el-form-item label="年龄：" prop="deptAge">
             <el-input
          size="small"
          v-model="patient.age"
          placeholder="输入患者年龄"
          :disabled="true"
        ></el-input>
   </el-form-item>
      <el-form-item label="手机号：">
        <!-- 搜索框 -->
        <el-input
          size="small"
          v-model="patient.phoneNumber"
          placeholder="输入手机号"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item  class="demonstration" label="出生日期" prop="deptDate">
        <!-- 搜索框 -->
         <div class="block">

    <el-date-picker
      v-model="patient.birthday"
      align="right"
      type="date"
      placeholder="选择日期"
      :disabled="true"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
      </el-form-item>
      <el-form-item label="证件号：">
        <!-- 搜索框 -->
        <el-input
          size="small"
          v-model="patient.idcard"
          placeholder="输入证件号"
          :disabled="true"
        ></el-input>
      </el-form-item>

      <el-form-item label="性别:" prop="deptSex">
        <!--根据字典表生成下拉选项-->
        <el-select
          size="small"
          clearable
          v-model="patient.sex"
          placeholder="输入性别"
          :disabled="true"
        >
          <el-option
            v-for="(label, value) in registerDict.sex"
            :key="value"
            :label="label"
            :value="value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      
      <!-- 如果是添加则显示添加按钮，点击事件对应添加方法 -->
       <el-form-item label="地址:">
        <!-- 搜索框 -->
        <el-input
          size="small"
          v-model="patient.address"
          placeholder="输入地址"
          :disabled="true"
        ></el-input>
      </el-form-item>     
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitInsertForm()"
          
          >创建挂号单</el-button
        >
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitInsertAndPayForm()"
          
          >创建挂号单并收费</el-button
        >
    </el-form>
<!-- 挂号费支付弹框 -->
    <el-dialog title="挂号费支付" :visible.sync="editFormVisible" width="751px" @click="closeDialog">
      <el-container>
      <el-main>
      <el-table size="small" :data="dataListOne" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column sortable prop="idcard" label="证件号" width="150">      
      </el-table-column>
      <el-table-column sortable prop="pname" label="患者姓名" width="100">
      </el-table-column>
      <el-table-column sortable prop="phoneNumber" label="联系方式" width="120">  
      </el-table-column>
      <el-table-column sortable prop="office" label="科室" width="80"> 
      </el-table-column>
      <el-table-column sortable prop="doctorName" label="接诊医生" width="100">        
      </el-table-column>
      <el-table-column sortable prop="registrationFee" label="挂号费（元）" width="120">      
      </el-table-column> 
      </el-table> 
      </el-main>
      <el-footer>
        <div >
          应收挂号费：{{dataListOne[0]===undefined?'':dataListOne[0].registrationFee}}元
        </div>
      </el-footer> 
      </el-container>
      <template>
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="mini" type="danger" @click="updateReChargeStatus()">确认交费</el-button>
      </template>    
    </el-dialog>  
  </div>
</template>

<script>
// 导入组件
import { registerDict } from "../../dict/registerDict";
import Pagination from "../../components/Pagination";
import axios from "axios";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import PatientSelector from '../../components/PatientSelector'
export default {
  data() {
    return {
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        allAddress:'',
        doctorNameById:[],
      //
      options: regionData,
      //
      selectedOptions: [],
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "添加",
      // 编辑页数据
      editForm: {
        id: "",
        number: "",
        name: "",
        sex: "",
        age: "",
        phone: "",
        clinicId: "",
        officeId: "",
        roleId: "",
        token: localStorage.getItem("logintoken"),
        time:"",
        address:"",
        allAddress:"",

      },
      // rules表单验证 （暂时还没有写）
      rules: {
        deptOffice: [
          { required: true, message: "请输入科室", trigger: "blur" },
        ],
        deptType: [{ required: true, message: "请输入类型", trigger: "blur" }],
        deptToctor: [
          { required: true, message: "请输入医生", trigger: "blur" },
        ],
        deptRegistrationFee: [
          { required: true, message: "请输入费用", trigger: "blur" },
        ],
        deptSex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        deptAge: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        deptName: [{ required: true, message: "请输入名字", trigger: "blur" }],
        deptDate: [{ required: true, message: "请输入日期", trigger: "blur" }],
      },

      // 分页，查询信息
      formInline: {
        page: 1,
        limit: 10,
        officeId: "",
        doctor:'',
        name:"",
        token: localStorage.getItem("logintoken"),
        drugRegistrationFee: "",
        type: "",
        drugSex: "",
        time:'',
        age:'',
        address:"",
        allAddress:"",
        chargeStatus:''
      },
      patient:{},
      // 删除部门（没用）
      seletedata: {
        ids: "",
        token: localStorage.getItem("logintoken"),
      },
      patientName:'',
      userparm: [], //搜索权限
      listData: [], //用户数据
      dataListOne:[],
      // 分页参数
      // pageparm: {
      //   currentPage: 1,
      //   pageSize: 10,
      //   total: 10
      // },

      //挂号字典
      registerDict: registerDict,
      //医生列表
      doctorList: [],
    };
  },
  // 注册组件
  components: {
    Pagination,
    PatientSelector,
  },
  /**
   * 创建完毕获取员工列表
   * 创建完毕获取诊所列表
   * 创建完毕获取科室列表
   * 创建完毕获取角色列表
   */
  created() {

    this.getClinicList();
    this.getOfficeList();
    this.getRoleList();
    this.getDoctorList();
   
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    handleChange(value) {
      let data =
        CodeToText[value[0]] +
        ", " +
        CodeToText[value[1]] +
        ", " +
        CodeToText[value[2]];
      //console.log(data);
    },
    // 创建挂号单不收费
    submitInsertForm() {
          axios
            .post("/api/register/insert", {
              office: this.formInline.officeId,
              doctor:this.formInline.doctor,
              type: this.formInline.type,
              registrationFee: this.formInline.drugRegistrationFee ,
              patientId:this.patient.id
            })
            .then((res) => {
              this.loading = false;
              console.log("res结果是", res);
              if (res.data.code==200) {
                this.$message({
                  type: 'success',
                  message: '新增挂号成功！'
                })
                this.formInline={}
                this.patient={}
                this.patientName='';
              } else {
                this.$message({
                  type: 'info',
                  message: res.data.message
                })
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("获取数据失败，请稍后再试！");
            })
    },
    //创建挂号单并收费
    submitInsertAndPayForm(){
      //  this.getDoctorName();
      this.editFormVisible = true
        this.dataListOne=[]
        this.dataListOne.push({
        idcard:this.patient.idcard,
        pname:this.patient.name,
        phoneNumber:this.patient.phoneNumber,
        office:this.formInline.officeId,
        doctorName:this.doctorNameById[0].name,
        registrationFee:this.formInline.drugRegistrationFee})
      
         axios
            .post("/api/register/insert", {
              office: this.formInline.officeId,
              doctor:this.formInline.doctor,
              type: this.formInline.type,
              registrationFee: this.formInline.drugRegistrationFee ,
              patientId:this.patient.id,
              chargeStatus:1
            })
            .then((res) => {
              this.loading = false;
              console.log("res结果是", res);
              if (res.data.code==200) {
                this.$message({
                  type: 'success',
                  message: '新建挂号成功！'
                })
                
              } else {
                this.$message({
                  type: 'info',
                  message: res.data.message
                })
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("获取数据失败，请稍后再试！");
            })
    },
    //弹框内确认交费按钮
    updateReChargeStatus(){
              this.editFormVisible = false
              this.loading = false    
                this.$message({
                  type: 'success',
                  message: '交费成功！'                  
                })
                this.formInline={}
                this.patient={}
                this.patientName='';
    },
     // 时间段选择事件
    handlePatientSelector(param) {
      this.patient = param
      this.patientName= param.name;
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true;
      if (row != undefined && row != "undefined") {
        this.title = "修改";
        this.editForm.id = row.id;
        this.editForm.number = row.number;
        this.editForm.name = row.name;
        this.editForm.sex = row.sex;
        this.editForm.age = row.age;
        this.editForm.phone = row.phone;
        this.editForm.clinicId = row.clinicId;
        this.editForm.officeId = row.officeId;
        this.editForm.roleId = row.roleId;
      } else {
        this.title = "添加";
        this.editForm.id = "";
        this.editForm.number = "";
        this.editForm.name = "";
        this.editForm.sex = "";
        this.editForm.age = "";
        this.editForm.phone = "";
        this.editForm.clinicId = "";
        this.editForm.officeId = "";
        this.editForm.roleId = "";
      }
    },
   
   
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
    // 获取诊所列表
    getClinicList() {
      axios
        .post("/api/clinic/selectAllClinic?pageNum=1&pageSize=1000", {})
        .then((res) => {
          this.loading = false;
          //console.log("结果是", res);
          this.clinicList = res.data.data.list;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("诊所加载失败，请稍后再试！");
        });
    },
    // 获取科室列表
   getOfficeList(){
        axios.post('/api/office/selectAllOffice?pageNum=1&pageSize=1000',{})
        .then(res => {
          this.loading = false 
          this.officeList = res.data.data.list                  
        })
        .catch(err => {
          this.loading = false
          this.$message.error('科室加载失败，请稍后再试！')
        })
    },
    //获取医生列表
    getDoctorList() {
          //console.log("-----------------------------")                  
     
      axios
        .post('/api/employee/selectAllEmployee?pageNum=1&pageSize=1000',{roleName:"医生"}
        )
         .then(res => {
          this.loading = false 
          this.doctorList = res.data.data.list             
        })
        .catch(err => {
          this.loading = false
          this.$message.error('科室加载失败，请稍后再试！')
        })
    },
    //获取医生名字
    getDoctorName() {
          //console.log("-----------------------------")                  
     
      axios
        .post('/api/employee/selectAllEmployee?pageNum=1&pageSize=1000',{id:this.formInline.doctor}
        )
         .then(res => {
          this.loading = false 
          this.doctorNameById = res.data.data.list   
           console.log( this.formInline.doctor +"+++++++++++++++++++++++++++++++++++++++")
          console.log( this.doctorNameById[0].name +"+++++++++++++++++++++++++++++++++++++++")
        })
        .catch(err => {
          this.loading = false
          this.$message.error('医生加载失败，请稍后再试！')
        })
    },
    // 获取角色列表
    getRoleList() {
      axios
        .post("/api/role/selectAllRole?pageNum=1&pageSize=1000", {})
        .then((res) => {
          this.loading = false;
          this.roleList = res.data.data.list;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("角色加载失败，请稍后再试！");
        });
    }

  },

};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-footer {
  background-color: rgb(34, 79, 148);
  color: rgb(255, 255, 255);
  text-align: right;
  line-height: 60px;
  
}

</style>

 
 